<template>
  <div class="user-comment">
    <div class="user-comment-in wrapper">
      <h2 class="they-using">他们正在使用</h2>
      <div class="use-notic">
        我们的问卷投放量很大，每次问卷调查都是一次品牌形象宣传，因此除了问卷功能，更注重系统环境的稳定性。在评估后，我们决定选择腾讯问卷，事实证明百万的问卷数据承载毫无压力，可靠！
      </div>
      <div class="users-option">
        <div class="user-active user-current">
          <img src="https://wj.qq.com/image/avatar_thomas.png" alt="" class="active-pic" />
          <div class="active-detail">
            <div class="active-name">Thomas</div>
            <div class="active-corp">小米路由器</div>
          </div>
        </div>
        <div class="user-active active-detail-supplement">
          <img src="https://wj.qq.com/image/avatar_cctv.png" alt="" class="active-pic " />
          <div class="active-detail">
            <div class="active-name">315晚会</div>
            <div class="active-corp">中央电视台</div>
          </div>
        </div>
        <div class="user-active active-detail-supplement">
          <img src="https://wj.qq.com/image/avatar_tongcheng.png" alt="" class="active-pic " />
          <div class="active-detail">
            <div class="active-name">火车票调查</div>
            <div class="active-corp">同程网</div>
          </div>
        </div>
        <div class="user-active active-detail-supplement">
          <img src="https://wj.qq.com/image/avatar_didi.png" alt="" class="active-pic " />
          <div class="active-detail">
            <div class="active-name">滴滴代驾</div>
            <div class="active-corp">滴滴</div>
          </div>
        </div>
        <div class="user-active active-detail-supplement">
          <img src="https://wj.qq.com/image/avatar_lianjia.png" alt="" class="active-pic " />
          <div class="active-detail">
            <div class="active-name">链家网</div>
            <div class="active-corp">链家</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.user-comment {
  background-color: white;
}
.user-comment-in {
  box-sizing: border-box;
  // background-color: aquamarine;
}
.they-using {
  padding: 35px 0 0;
  text-align: center;
  font-size: 20px;
  // display: flex;
  // align-items: center;
  background-color: azure;
  font-weight: 400;
}
.use-notic {
  margin-top: 20px;
  height: 80px;
  padding-bottom: 30px;
}
.users-option {
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
}
.user-active {
  display: flex;
  align-items: center;
  vertical-align: top;
  width: 150px;
  cursor: pointer;
  text-align: left;
  position: relative;
  opacity: .5;
}
.user-active.user-current,
.user-active:hover {
  opacity: 1;
}
.user-active.user-current::before,
.user-active:hover::before {
  content: "";
  width: 50px;
  height: 3px;
  background-color: red;
  position: absolute;
  top: -2px;
  left: 0;
}
.active-pic {
  // border-top: 3px  rgba(0, 0, 255, 0.5);
  padding: 31px 0 40px 0;
}
.active-pic:hover {
  // border-top: 3px solid #58a6e7;
}
.active-detail {
  cursor: pointer;
  display: block;
  // width: 150px;
}
.active-detail-supplement {
  margin-left: 50px;
}
.active-name {
  text-align: left;
  margin: 1px 0 0 5px;
}
.active-corp {
  margin: 3px 0 0 4px;
  font-size: 14px;
}
</style>
